<template>
  <div class="container">

    <div class="userinfo" @click="bindViewTap">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
      <div class="userinfo-nickname">
        <card :text="userInfo.nickName"></card>
      </div>
    </div>

    <div class="usermotto">
      <div class="user-motto">
        <card :text="motto"></card>
      </div>
    </div>

    
    openid:{{userInfo.openid}}session_key:{{userInfo.session_key}}
    <button @click="saveUser">saveUser</button>
    <button
      open-type="getUserInfo"
      @getuserinfo="bindgetuserinfo"
      >获取信息</button
    >
    <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"
  >获取用户信息</button
>
  </div>
</template>

<script>
import card from '@/components/card'
import config from '@/config'
export default {
  data () {
    return {
      userInfo: {}
    }
  },

  components: {
    card
  },

  methods: {
    getUser () {
      var that=this
      wx.getUserInfo({
        success(res) {
          that.userInfo = res.userInfo
        }
      }) 
      wx.login({  
        success:function(res){
          wx.request({  
              //获取openid接口  
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            data:{  
              appid:'wxc9f7f945ee56b5e3',  
              secret:'ce0c1d84ded9d1ba4671a19c299b1961',  
              js_code:res.code,  
              grant_type:'authorization_code'
            },  
            method:'GET',  
            success:function(res){              
              that.userInfo = Object.assign(res.data, that.userInfo);
              console.log(222,that.userInfo)  
            }  
          })  
        }
      }) 
    },
    saveUser(){
      wx.request({  
        //获取openid接口  
        url: config.host + '/api/v1.index/saveUser',
        data:this.userInfo,  
        method:'post',  
        success:function(res){              
          console.log(133,res)  
        }  
      })
    },
    checkAuth(){
      // 查看是否授权
      var that = this
      wx.getSetting({
        success(res) {
          console.log(111,res)
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
            wx.getUserInfo({
              success(res) {
                that.userInfo = res.userInfo
                console.log(333,res.userInfo)
              }
            })
          }
        }
      })
    },
    bindgetuserinfo(e) {
      this.userInfo = e.mp.detail.userInfo
      console.log(222,e.mp.detail.userInfo)
    },
    onGotUserInfo(e) {
      console.log(e.detail.errMsg)
      console.log(e.detail.userInfo)
      console.log(e.detail.rawData)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    // this.showUserInfo()
    this.getUser()

  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
